<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>茶叶商品管理</title>
    <!-- Bootstrap 5 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .goods-img {
            max-width: 100px;
            height: auto;
            border-radius: 4px;
        }
        .spec-item {
            background: #f8f9fa;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 4px;
        }
    </style>
</head>
<body>
<div class="container py-4" id="app">
    <!-- 配置管理 -->
    <script>
        const config = {
            baseURL: 'http://localhost:8800'
        }
    </script>

    <!-- 导航 -->
    <nav class="navbar navbar-expand-lg bg-body-tertiary mb-4">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">茶店管理</a>
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addGoodsModal">
                新增商品
            </button>
        </div>
    </nav>

    <!-- 商品列表 -->
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">商品列表</h5>
            <div class="d-flex gap-2">
                <input type="text" class="form-control" placeholder="搜索商品"
                       v-model="searchParams.name" @input="loadGoods">
                <select class="form-select" v-model="searchParams.categoryId" @change="loadGoods">
                    <option value="">全部分类</option>
                    <option v-for="c in categories" :value="c.categoryId">{{c.categoryName}}</option>
                </select>
            </div>
        </div>

        <div class="card-body">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>封面</th>
                    <th>商品名称</th>
                    <th>分类</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in goodsList" :key="item.id">
                    <td>
                        <img :src="item.coverImage" class="goods-img">
                    </td>
                    <td>{{item.name}}</td>
                    <td>{{getCategoryName(item.categoryId)}}</td>
                    <td>
                                <span :class="['badge', item.status === '1' ? 'bg-success' : 'bg-secondary']">
                                    {{item.status === '1' ? '已上架' : '未上架'}}
                                </span>
                    </td>
                    <td>
                        <button class="btn btn-sm btn-outline-primary">编辑</button>
                        <button class="btn btn-sm btn-outline-danger ms-2">删除</button>
                    </td>
                </tr>
                </tbody>
            </table>

            <nav aria-label="Page navigation">
                <ul class="pagination justify-content-center">
                    <li class="page-item"><a class="page-link" href="#">上一页</a></li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">下一页</a></li>
                </ul>
            </nav>
        </div>
    </div>

    <!-- 新增商品模态框 -->
    <div class="modal fade" id="addGoodsModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">新增商品</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form @submit.prevent="submitGoods">
                        <div class="mb-3">
                            <label class="form-label">商品名称</label>
                            <input type="text" class="form-control" v-model="newGoods.name" required>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">商品分类</label>
                                <select class="form-select" v-model="newGoods.categoryId" required>
                                    <option v-for="c in categories" :value="c.categoryId">
                                        {{c.categoryName}}
                                    </option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">库存数量</label>
                                <input type="number" class="form-control" v-model="newGoods.stockNum" required>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">封面图片</label>
                            <input type="file" class="form-control" @change="uploadCover" accept="image/*" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">商品描述</label>
                            <textarea class="form-control" rows="3" v-model="newGoods.description"></textarea>
                        </div>

                        <div class="mb-3">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <label class="form-label">商品规格</label>
                                <button type="button" class="btn btn-sm btn-primary"
                                        @click="addSpecification">
                                    添加规格
                                </button>
                            </div>

                            <div class="spec-item" v-for="(spec, index) in newGoods.specList" :key="index">
                                <div class="row g-2">
                                    <div class="col-md-6">
                                        <input type="text" class="form-control"
                                               placeholder="规格说明" v-model="spec.specRemark" required>
                                    </div>
                                    <div class="col-md-4">
                                        <input type="number" class="form-control"
                                               placeholder="价格" v-model="spec.price" required>
                                    </div>
                                    <div class="col-md-2">
                                        <button class="btn btn-danger btn-sm"
                                                @click="removeSpec(index)">
                                            ×
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary w-100">提交商品</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 脚本 -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>

<script>
    const { createApp } = Vue;

    createApp({
        data() {
            return {
                searchParams: {
                    name: '',
                    categoryId: '',
                    status: ''
                },
                goodsList: [],
                categories: [],
                newGoods: {
                    name: '',
                    description: '',
                    categoryId: '',
                    coverImage: '',
                    stockNum: 0,
                    specList: [{ specRemark: '', price: 0 }]
                }
            }
        },
        mounted() {
            this.loadCategories();
            this.loadGoods();
        },
        methods: {
            async loadGoods() {
                try {
                    const params = new URLSearchParams(this.searchParams);
                    const res = await axios.get(`${config.baseURL}/goods/list?${params}`);
                    this.goodsList = res.data.data.list;
                } catch (error) {
                    alert('获取商品列表失败');
                }
            },
            async loadCategories() {
                try {
                    const res = await axios.get(`${config.baseURL}/category/list`);
                    this.categories = res.data.data;
                } catch (error) {
                    alert('获取分类失败');
                }
            },
            getCategoryName(categoryId) {
                const category = this.categories.find(c => c.categoryId == categoryId);
                return category ? category.categoryName : '';
            },
            async uploadCover(e) {
                const file = e.target.files[0];
                const formData = new FormData();
                formData.append('file', file);

                try {
                    const res = await axios.post(`${config.baseURL}/file/upload`, formData);
                    this.newGoods.coverImage = res.data.data;
                } catch (error) {
                    alert('图片上传失败');
                }
            },
            addSpecification() {
                this.newGoods.specList.push({ specRemark: '', price: 0 });
            },
            removeSpec(index) {
                this.newGoods.specList.splice(index, 1);
            },
            async submitGoods() {
                try {
                    await axios.post(`${config.baseURL}/goods/add`, this.newGoods);
                    alert('添加成功');
                    this.loadGoods();
                    bootstrap.Modal.getInstance('#addGoodsModal').hide();
                } catch (error) {
                    alert('添加失败');
                }
            }
        }
    }).mount('#app');
</script>
</body>
</html>